<template>
  <div class="card d-flex justify-center align-center">
    <v-hover v-slot="{ hover }"
      ><div
        class="
          item_card
          white
          rounded-lg
          d-flex
          justify-center
          align-start
          flex-column
        "
        :class="{ 'on-hover': hover }"
      >
        <div
          class="
            icon
            blue
            lighten-5
            d-flex
            justify-center
            align-center
            mb-3
            rounded-lg
          "
        >
          <div>
            <v-img
              :lazy-src="iconUrl"
              :src="iconUrl"
              width="45px"
              height="40px"
            ></v-img>
          </div>
        </div>
        <div class="font-weight-black h4 mb-3">{{ title }}</div>
        <div class="text-justify text-sm-body-2">{{ text }}</div>
      </div>
    </v-hover>
  </div>
</template>

<script>
export default {
  props: ['iconUrl', 'title', 'text'],
};
</script>

<style>
.card {
  width: 25%;
  height: 300px;
}
.item_card {
  width: 85%;
  height: 85%;
  transition: 0.4s ease-in-out;
  box-shadow: 2px 2px 20px 1px rgba(209, 196, 233, 0.5);
  padding: 10px;
}
.item_card:not(.on-hover) {
  /* opacity: 0.6; */
  width: 80%;
  height: 80%;
  box-shadow: 2px 2px 20px 1px rgba(209, 196, 233, 0.5);
  padding: 10px;
}
.icon {
  width: 65px;
  height: 60px;
}

@media screen and (max-width: 500px) {
  .item {
    width: 100%;
  }
}
</style>